/**
 * Created by hejg on 2018/5/10.
 */
import React, {Component} from 'react';
import {StyleSheet, Alert, View, Text, StatusBar, AsyncStorage} from 'react-native';
import PasswordGesture  from 'react-native-gesture-password';
import Style from '../../../components/Style';
import Tool from '../../../components/Tool';

export default class GesturePassword extends Component {
    static navigationOptions = {
        header: null
    };

    constructor(props) {
        super(props);
        this.gestureCode = '';
        this.state = {
            message: '请设置您的手势登陆密码.',
            status: 'normal'
        }
    }

    onEnd(password) {
        if (password.length < 4) {
            // this.onReset();
            this.setState({
                status: 'wrong',
                message: '手势设置过于简单.'
            });
            return;
        }
        if (this.gestureCode === '') {
            // The first password
            this.gestureCode = password;
            this.setState({
                status: 'normal',
                message: '请再次设置您的手势登陆密码.'
            });
        } else {
            // The second password
            if (password === this.gestureCode) {
                this.setState({
                    status: 'right',
                    message: '您的手势登陆密码已经设置成功.'
                });
                AsyncStorage.setItem(Tool.storageConst.gestureKey, this.gestureCode);
                this.gestureCode = '';
                Alert.alert(
                    '提示',
                    '手势密码设置成功.',
                    [
                        {
                            text: '确定', onPress: () => {
                            this.props.navigation.navigate('Main');
                        }
                        },
                    ],
                    {cancelable: false}
                )
                // 进入页面前要刷新用户信息到Tool.setUser,或者在Load页面就先验证好
                // this.props.navigation.navigate('SignIn');
                // your codes to close this view
            } else {
                this.setState({
                    status: 'wrong',
                    message: '两次密码输入不一致,请重试.'
                });
                this.gestureCode = '';
            }
        }
    }

    onStart() {
        if (this.gestureCode === '') {
            this.setState({
                status: 'normal',
                message: '请设置您的手势登陆密码.'
            });
        } else {
            this.setState({
                status: 'normal',
                message: '请再次设置您的手势登陆密码.'
            });
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <StatusBar backgroundColor={Style.color.white} barStyle="dark-content"/>
                <UserInfo/>
                <PasswordGesture
                    style={{backgroundColor:Style.color.white}}
                    textStyle={{fontSize:16}}
                    status={this.state.status}
                    message={this.state.message}
                    normalColor={Style.color.gray}
                    rightColor={Style.color.green}
                    wrongColor={Style.color.red}
                    interval={600}
                    onStart={() => this.onStart()}
                    onEnd={(password) => this.onEnd(password)}
                    outerCircle={false}
                />
            </View>
        );
    }
}

class UserInfo extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View>
                <Text></Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Style.color.white
    },
});